<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.custom-tree-node {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}
</style>
<template>
    <div class="package">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-tickets"></i> 总 监 加 权 分 红 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" @click="V5GrantInit(0)">发放今日分红</el-button>
            </div>
            <el-table @selection-change="handleSelectionChange" :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column
                type="selection"
                width="55pxn">
                </el-table-column>
                <el-table-column prop="date" label="日期"  align="center"></el-table-column>
                <el-table-column prop="totalAmount" label="收入总金额"  align="center"></el-table-column>
                <el-table-column prop="finishAmount" label="最终发放总金额"  align="center"></el-table-column>
                <el-table-column prop="count" label="V5人数"  align="center"></el-table-column>
                <el-table-column prop="avgAmount" label="平均每人发放金额"  align="center"></el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="sizeChange"
                    @current-change="pageChange"
                    :current-page="query.pageIndex"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"
                >
                </el-pagination>
            </div>
        </div>

        <el-dialog title="发放今日总监加权分红" :visible.sync="showadd" width="450px">
            <el-form ref="send" :model="grantdata" label-width="120px">
                <el-form-item label="昨日收入总金额:">
                    <el-input v-model="grantdata.totalAmount" style="width: 200px" disabled></el-input>
                </el-form-item>
                <el-form-item label="总监人数:">
                    <el-input v-model="grantdata.v5Count" style="width: 200px" disabled></el-input>
                </el-form-item>
                <el-form-item label="每人平均可分:">
                    <el-input v-model="grantdata.avgAmount" style="width: 200px" disabled></el-input>
                </el-form-item>
                <el-form-item label="最终发放总金额:">
                    <el-input v-model="grantdata.finishAmount" style="width: 200px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showadd = false">取 消</el-button>
                <el-button type="primary" @click="V5GrantInit(grantdata.finishAmount)">重 新 计 算</el-button>
                <el-button type="primary" @click="V5GrantSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script >
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { PagingV5Query,V5GrantInit,V5GrantSubmit} from '@/api/finance';
export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        // 这里存放数据
        return {
            query: {
                pageIndex: 1,
                pageSize: 20
            },
            addTree: false,
            tableData: [],
            pageTotal: 0,
            showadd:false,
            addFrom:{},
            editFrom:{},
            showEdit:false,
            grantdata:{},
            deleteArr:[]
        };
    },
    // 过滤器
    filters: {},
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        handleSelectionChange(e) {
            console.log(e)
            this.deleteArr = e.map(item => item.id)
        },
        V5GrantInit(finishAmount){
            V5GrantInit({ finishAmount: finishAmount }).then((res) => {
                // console.log(res)
                this.grantdata = res.Data
                this.showadd = true
            });
        },
        V5GrantSubmit() {
            V5GrantSubmit(this.grantdata).then(res =>{
                if (res.RequestStatus == 200) {
                    this.$message.success('成功');
                    this.getList();
                    this.showadd = false;
                    this.grantdata = {};
                }})
        },
        handleAvatarSuccess2(file) {
            // this.addFrom.resourceImg = this.$url + file.Data.url;
            this.$set(this.addFrom, 'resourceImg', this.$url + file.Data.url);
        },
        handleAvatarSuccess3(file) {
            // this.addFrom.resourceImg = this.$url + file.Data.url;
            this.$set(this.editFrom, 'resourceImg', this.$url + file.Data.url);
        },
        pageChange(e) {
            this.query.pageIndex = e;
            this.getList();
        },
        getList() {
            PagingV5Query(this.query).then((res) => {
                this.tableData = res.Data.list;
                this.pageTotal = res.Data.paging.totalItemCount;
            });
        },
        sizeChange(e) {
            this.query.pageSize = e;
            this.getList();
        },
        searchDetail(row) {}
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.getList();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>